<template>
  <div class="statistic-container" :class="{'collapse':collapse1}">
    <div class="statistic-number">
      <div v-for="(i, idx) in rightList" :key="idx" class="number-item" @click="jump(idx)">
        <div class="number-label">{{ i.label }}</div>
        <div class="number-count"><span :style="{color:i.color}">{{ i.count }}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import { warningCountStatistics } from "@/api/warnings";
import { shipMixin } from "../../mixins/mixin";
import { mapState } from "vuex";

export default {
  mixins: [shipMixin],
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rightList: [
        {
          label: "船舶总数",
          count: "0",
          color: '#136CFF'
        },
        {
          label: "告警总数",
          count: "0",
          color: '#FFC425'
        },
        {
          label: "已处理告警",
          count: "0",
          color: '#10DC9B'
        },
        {
          label: "确警超时",
          count: "0",
          color: '#F8292D'
        },
        {
          label: "处理超时",
          count: "0",
          color: '#43C2E7'
        },
      ],
    };
  },
  computed: {
    ...mapState('bigScreen', [
      'collapse1'
    ])
  },
  methods: {
    jump(index) {
      if (index === 0) {
        if (this.type === 'anji') {
          window.open('/modules/system/system/shipInfo')
        } else {
          window.open('/ship/shipList')
        }
      }
    },
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = {};
      searchData.shipId = this.shipId;
      warningCountStatistics(searchData).then((res) => {
        // todayProcessedWarningCount
        // 今日已处理告警数量
        // integer(int32)
        // todayUnProcessedWarningCount
        // 今日待处理告警数量
        // integer(int32)
        // todayWarningCount
        // 今日告警数
        // integer(int32)
        // totalProcessedTimeoutCount
        // 处理超时总数
        // integer(int32)
        // totalProcessedWarningCount
        // 已处理告警总数
        // integer(int32)
        // totalWarningCount
        // 告警总数
        // integer(int32)
        // totalWarningTimeoutCount
        // 确警超时总数
        const result = res.result || {};

        this.rightList[0].count = result.shipNum;
        this.rightList[1].count = result.totalWarningCount;
        this.rightList[2].count = result.totalProcessedWarningCount;
        this.rightList[3].count = result.totalWarningTimeoutCount;
        this.rightList[4].count = result.totalProcessedTimeoutCount;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/collapse";
.statistic-container {
  //pointer-events: none; // 解决遮挡地图交互问题
  position: absolute;
  bottom: 0;
  width: 100%;
  left: $width + px;
  transition: $transition1;
  &.collapse {
    left: 0;
  }
  .statistic-number {
    position: absolute;
    left: 23px;
    bottom: 12px;
    width: 666px;
    height: 91px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    display: flex;
    .number-item {
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 17px 0;
      &:first-child {
        cursor: pointer;
      }
      .number-label {
        font-size: 18px;
        color: #FFFFFF;
        line-height: 18px;
      }
      .number-count {
        font-size: 22px;
        line-height: 22px;
      }
    }
  }
}
</style>
